<!--
 * @Author: your name
 * @Date: 2021-09-28 11:40:03
 * @LastEditTime: 2021-09-28 11:42:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\components\About.vue
-->
<template>
  <div>
    <section class="about" id="about">

<h1 class="heading"><span>about</span> us </h1>

<div class="row">

    <div class="image">
        <img src="../../assets/images/about-img.jpg" alt="">
    </div>

    <div class="content">
        <h3>we will give a very special celebration for you</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam labore fugiat ut esse perferendis perspiciatis provident dolores fuga in facilis culpa possimus, quia praesentium itaque, sapiente quasi harum rem asperiores.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat vero expedita incidunt provident quibusdam aut odit, numquam nesciunt similique nisi.</p>
        <a href="#" class="btn">contact us</a>
    </div>

</div>

</section>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="scss">
  .about .row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:1.5rem;
}

.about .row .image{
    flex:1 1 45rem;
    padding:1rem;
}

.about .row .image img{ 
    width: 100%;
    border-radius: .5rem;
    border:1rem solid #333;
}

.about .row .content{
    flex:1 1 45rem;
}

.about .row .content h3{
    font-size: 3.5rem;
    color:#fff;
}

.about .row .content p{
    font-size: 1.5rem;
    color:#eee;
    padding:1rem 0;
    line-height: 2;
}

</style>